<template>
    <!-- 添加 @click 事件监听器 -->
    <div
        class="weather-container"
        v-loading="loading"
        element-loading-background="rgba(122, 122, 122, 0.8)"
        @mouseenter="showFutureWeather = true"
        @mouseleave="showFutureWeather = false"
        @click="updateWeather"
    >
        <!-- 使用 v-if 确保 weather 有值时才渲染 -->
        <div v-if="weather" class="current-weather-tech">
            <div class="city-info">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-position"></use>
                </svg>
                <!-- 使用可选链操作符确保安全访问 -->
                <span>{{ weather.result.location.city }}</span>
            </div>
            <div class="current-condition">
                <svg class="icon icon-big" aria-hidden="true">
                    <use :xlink:href="`#icon-${translateWeather(weather.result.now.text)}`"></use>
                </svg>
                <div class="temp-info">
                    <span class="temp">{{ weather.result.now.temp }}°C</span>
                    <span class="condition-text">{{ weather.result.now.text }}</span>
                </div>
            </div>
            <div class="additional-info">
                <div class="info-item">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-rh"></use>
                    </svg>
                    <span>{{ weather.result.now.rh }}%</span>
                </div>
                <div class="info-item">
                    <svg class="icon" aria-hidden="true">
                        <use xlink:href="#icon-wind_class"></use>
                    </svg>
                    <span>{{ weather.result.now.wind_class }} km/h</span>
                </div>
            </div>
        </div>
        <div v-else class="loading"><i class="el-icon-loading"></i>加载天气信息中...</div>
        <!-- 使用 v-if 确保 weather 有值时才渲染未来天气 -->
        <div v-if="showFutureWeather && weather" class="future-weather">
            <h3>未来天气预览</h3>
            <div class="future-weather-list">
                <!-- 使用 v-if 确保 forecasts 存在 -->
                <div v-for="(forecast, index) in weather.result.forecasts || []" :key="index" class="future-weather-item">
                    <p>{{ forecast.date }} ({{ forecast.week }})</p>
                    <p class="flex gap-2">
                        <svg class="icon" aria-hidden="true">
                            <use :xlink:href="`#icon-${translateWeather(forecast.text_day)}`"></use>
                        </svg>
                        {{ forecast.text_day }}
                    </p>
                    <p>温度: {{ forecast.low }}°C - {{ forecast.high }}°C</p>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { getWeather } from '@/api/openPlatform/index';

const weather = ref<OpenPlatform['WeatherData']>();
const showFutureWeather = ref(false);

// 根据天气状况返回对应的图标类名
const weatherTranslation = {
    晴: 'Sunny',
    多云: 'Cloudy',
    阴: 'Overcast',
    阵雨: 'Shower',
    雷阵雨: 'Thundershower',
    雷阵雨伴有冰雹: 'Thundershower_with_hail',
    雨夹雪: 'Sleet',
    小雨: 'Light_rain',
    中雨: 'Moderate_rain',
    大雨: 'Heavy_rain',
    暴雨: 'Storm',
    大暴雨: 'Heavy_storm',
    特大暴雨: 'Severe_storm',
    阵雪: 'Snow_flurry',
    小雪: 'Light_snow',
    中雪: 'Moderate_snow',
    大雪: 'Heavy_snow',
    暴雪: 'Snowstorm',
    雾: 'Fog',
    冻雨: 'Ice_rain',
    沙尘暴: 'Duststorm',
    小到中雨: 'Light_to_moderate_rain',
    中到大雨: 'Moderate_to_heavy_rain',
    大到暴雨: 'Heavy_rain_to_storm',
    暴雨到大暴雨: 'Storm_to_heavy_storm',
    大暴雨到特大暴雨: 'Heavy_to_severe_storm',
    小到中雪: 'Light_to_moderate_snow',
    中到大雪: 'Moderate_to_heavy_snow',
    大到暴雪: 'Heavy_snow_to_snowstorm',
    浮尘: 'Dust',
    扬沙: 'Sand',
    强沙尘暴: 'Sandstorm',
    浓雾: 'Dense_fog',
    龙卷风: 'Tornado',
    弱高吹雪: 'Weak_high_blow_snow',
    轻雾: 'Mist',
    强浓雾: 'Heavy_dense_fog',
    霾: 'Haze',
    中度霾: 'Moderate_haze',
    重度霾: 'Severe_haze',
    严重霾: 'Hazardous_haze',
    大雾: 'Heavy_fog',
    特强浓雾: 'Extra-heavy_dense_fog',
    雨: 'Rain',
    雪: 'Snow',
};
// 根据中文天气状况返回对应的英文天气状况
const translateWeather = (zhWeather: string) => {
    // 根据中文天气状况返回对应的英文天气状况，默认返回 'Sunny'
    // 当天气为晴时，要区分白天和晚上
    if (zhWeather === '晴') {
        const currentHour = new Date().getHours();
        if (currentHour >= 6 && currentHour < 18) {
            return 'Sunny'; // 白天
        } else {
            return 'Night'; // 晚上
        }
    } else {
        // 其他天气
        return weatherTranslation[zhWeather] || 'Sunny';
    }
};

// 加载天气信息
const loading = ref(false);
// 定义更新天气信息的函数
const updateWeather = () => {
    // 显示加载状态
    loading.value = true;
    // 调用 API 获取天气信息
    getWeather()
        .then((res) => {
            weather.value = res.data;
            // 去除第一个未来天气项
            weather.value.result.forecasts.shift();
            // 成功时提示
            ElMessage.success('天气信息更新成功');
            loading.value = false;
        })
        .catch((_error) => {
            // 失败时提示
            ElMessage.error('天气信息更新失败，请稍后重试');
        });
};

onMounted(() => {
    getWeather()
        .then((res) => {
            weather.value = res.data;
            // 去除第一个未来天气项
            weather.value.result.forecasts.shift();
        })
        .catch((_error) => {
            // 失败时提示
            ElMessage.error('天气信息更新失败，请稍后重试');
        });
});
</script>

<style scoped>
.weather-container {
    position: relative;
    border-radius: 8px;
    padding: 4px 12px;
    max-height: 100%;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(5px);
    transition: all 0.3s ease;
    color: #fff;
    display: flex;
    align-items: center;
    /* 确保父元素不会创建新的层叠上下文影响子元素层级 */
    transform: none;
    perspective: none;
    contain: none;
    /* 给父元素设置一个较高的 z-index 基础值 */
    z-index: 1;
    cursor: pointer;
}

.weather-container:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.current-weather-tech {
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    gap: 12px;
    align-items: center;
    height: 100%;
}

.city-info {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 14px;
}

.current-condition {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: center;
}

.current-condition i {
    font-size: 24px;
}

.temp-info {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.temp {
    font-size: 18px;
    font-weight: bold;
}

.condition-text {
    font-size: 12px;
    opacity: 0.8;
}

.additional-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.future-weather {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(54, 64, 66, 0.9);
    border-radius: 0 0 8px 8px;
    padding: 12px;
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    /* 设置一个更高的 z-index，确保显示在其他元素之上 */
    z-index: 9999;
}

.weather-container:hover .future-weather {
    opacity: 1;
    transform: translateY(0);
}

.future-weather h3 {
    margin: 0 0 8px;
    font-size: 14px;
    font-weight: 500;
}

.future-weather-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.future-weather-item {
    padding: 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.1);
    transition: background 0.3s ease;
}

.future-weather-item:hover {
    background: rgba(255, 255, 255, 0.2);
}

.future-weather-item p {
    margin: 4px 0;
    font-size: 12px;
}

.loading {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #ccc;
}

.loading i {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
</style>
